<!--
 * @Description: 产量查询页面
-->
<template>
  <BaseMainSlot :show-btn-box="false">
    <template v-slot:search-box>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <div class="select-btns search-btns" @click.stop="changeSelect()">
              <i class="el-icon-circle-check"></i>
              <p v-if="activeName === '1'">收起筛选</p>
              <p v-if="activeName === ''">展开筛选</p>
            </div>
          </template>
          <div class="search-btn search-btns" @click.stop="search()">
            <i class="el-icon-circle-check"></i>
            <p>查询</p>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">选择鱼塘</div>
            <el-select filterable clearable v-model="searchList.fishPondId" clearable placeholder="请选择" @change="() => {
              $set(searchList, 'productionBatchId', null)
            }">
              <el-option v-for="item in fishPondArr" :key="item.fishPondId" :label="item.pondName"
                :value="item.fishPondId" />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">批次编号</div>
            <el-select filterable clearable v-model="searchList.productionBatchId" clearable placeholder="请选择">
              <template v-for="item in batchListBySearch">
                <el-option v-if="!searchList.fishPondId || item.fishPondId == searchList.fishPondId"
                  :key="item.productionBatchId" :label="`${item.mnecode}_${item.varietyName}`"
                  :value="item.productionBatchId" />
              </template>
            </el-select>
          </div>
          <div class="select-box-content select-box-leng-content">
            <div class="select-box-content-name">记录日期</div>
            <el-date-picker v-model="searchList.date" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable />
          </div>
        </el-collapse-item>
      </el-collapse>
      <ActionBar :export-active="true" :hasExport="true" :hasAdd="false" :hasDel="false" :page-no="162" @add="add"
        @del="del" @exportFile="exportFile" />
    </template>
    <template v-slot:table-box>
      <div class="zztop-box" v-if="batchlist.length">
        <div v-for="(data, index) in batchlist" :key="index" class="zztopbar">
          <div class="zzbarone">
            <div class="newline-list">
              <div class="newline-item">
                <div class="line-item-title">批次编号</div>
                <div class="line-item-value">{{ data.mnecode || "暂无数据" }}</div>
              </div>
              <div class="newline-item">
                <div class="line-item-title">码单号</div>
                <div class="line-item-value">{{ data.productionBatchCode || "暂无数据" }}</div>
              </div>
              <div class="newline-item">
                <div class="line-item-title">鱼塘</div>
                <div class="line-item-value">
                  <span v-if="data.batchObj !== undefined">{{ data.batchObj["pondName"] || "暂无数据" }}</span>
                  <span v-if="data.batchObj === undefined">暂无数据</span>
                </div>
              </div>
              <div class="newline-item">
                <div class="line-item-title">品种</div>
                <div class="line-item-value">
                  <span v-if="data.batchObj !== undefined">{{ data.batchObj["varietyName"] || "暂无数据" }}</span>
                  <span v-if="data.batchObj === undefined">暂无数据</span>
                </div>
              </div>
              <div class="newline-item">
                <div class="line-item-title">记录人</div>
                <div class="line-item-value">
                  <span v-if="data.batchObj !== undefined">{{ data.batchObj["staffName"] || "暂无数据" }}</span>
                  <!-- <span v-if="data.batchObj !== undefined">斤</span> -->
                  <span v-if="data.batchObj === undefined">暂无数据</span>
                </div>
              </div>
              <div class="newline-item">
                <div class="line-item-title">产出日期</div>
                <div class="line-item-value">
                  <span v-if="data.batchObj !== undefined">{{ data.batchObj["produceDate"] || "暂无数据" }}</span>
                  <span v-if="data.batchObj === undefined">暂无数据</span>
                </div>
              </div>
            </div>
          </div>
          <div class="table-cnt">
            <el-table v-loading="loading" highlight-current-row :data="data.batchList" stripe border>
              <el-table-column type="index" label="序号" width="100" />
              <el-table-column prop="fishType" label="鱼类类型">
                <template slot-scope="scope">{{ scope.row.fishType === 'LIVE_FISH' ? '活鱼' : '次鱼' }}</template>
              </el-table-column>
              <el-table-column prop="specName" label="规格（斤/尾）" />
              <el-table-column prop="num" label="数量（尾）" />
              <el-table-column prop="weight" label="产量">
                <template slot-scope="scope">{{ scope.row.weight }} {{ '斤' }}</template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <ExportBtn ref="ExportBtn" :btnName="'产出报表'" :apiName="'produceExport'" :searchObj="searchObj"></ExportBtn>
        <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize"
          @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
      </div>
      <div v-else class="zztop-box" style="text-align: center; line-height: 100px;">暂无产出记录！</div>
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import outputRecordApi from "@/api/output-manage/output-record";
import outputQueryApi from "@/api/output-manage/output-query";
import fishPondApi from "@/api/basic-info-manage/fishPond";
import BatchApi from "@/api/batch-mange";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import ExportBtn from "@/components/ExportBtn";
import { mymixin } from "@/utils/mixins";
export default {
  name: "OutputQuery",
  components: {
    ActionBar,
    ExportBtn,
    Pagination,
    BaseMainSlot,
  },
  mixins: [mymixin],
  data () {
    return {
      searchObj: {},
      // 可选择批次list
      batchListBySearch: [],
      // 可选择批次list
      batchlist: [],
      // 搜索列表
      searchList: {
        fishPondId: ''
      },
      // 当前选中的数据项数组
      nowSelectList: [],
      fishPondArr: []
    };
  },
  watch: {},
  created () { },
  mounted () {
    this.loading = false;
    this.getselectdatalist();
    this.getTableDataList();
  },
  methods: {
    // 获取表格数据
    getTableDataList () {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          ...this.searchList
        }
      };
      if (this.searchList?.date) {
        params.entity.produceDateStart = this.searchList.date[0] + ' 00:00:00';
        params.entity.produceDateEnd = this.searchList.date[1] + ' 23:59:59';
      }
      this.searchObj = JSON.parse(JSON.stringify(params.entity))
      outputRecordApi.queryPageByCondition(params).then(res => {
        let batch = res.data.content;
        this.totalSize = res.data.totalElements;
        this.batchlist = batch;
        this.batchlist.forEach(async (item, index) => {
          this.$set(item, "batchObj", item);
          let List = await this.tableDataList(item.produceId);
          this.$set(item, "batchList", List);
        });
      });
    },
    async tableDataList (e) {
      // let params = {
      //   ...this.searchList
      // };
      // if (this.searchList?.date) {
      //   params.startTime = dateToFormattwo(this.searchList.date[0]);
      //   params.endTime = dateToFormattwo(this.searchList.date[1]);
      // }
      const { data: res } = await outputQueryApi.queryByCondition({
        produceId: e,
        // ...params
      });
      if (res !== undefined) {
        return res;
      } else {
        return [];
      }
    },
    // 获取两个下拉框数据
    async getselectdatalist () {
      const { data: resp } = await fishPondApi.queryByCondition({});
      if (resp !== undefined) {
        this.fishPondArr = resp;
      } else this.fishPondArr = [];
      BatchApi.queryByCondition().then(res => {
        this.batchListBySearch = res.data
      })
    },
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";

::v-deep .el-dialog__wrapper .el-input__inner {
  color: #272929 !important;
}

.newline {
  width: 2px;
  height: 100%;
  background-image: linear-gradient(#013b4d, #ffffff, #013b4d);
}

.newline-two {
  width: 1px;
  border-left: 1px dashed #00969f;
  height: 40px;
}

.zztop-box {
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: auto;
}

.zztopbar {
  width: calc(100% - 7px);
  margin: 16px 5px 16px 0;
  background: $contentColor;
  padding: 30px 16px 16px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 5px;
    background: $menuBg;
    left: calc(50% - 300px);
    top: 0;
  }

  .zzbarone {
    width: 100%;
    height: 100px;
    border-bottom: 1px dashed $menuBg;

    .newline-list {
      padding: 5px;
      border: 1px solid $menuBg;
      border-radius: 5px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: $appMainBgColor;
    }

    .newline-item {
      width: 100%;
      line-height: 30px;

      &:not(:last-child) {
        border-right: 1px solid $menuBg;
      }

      .line-item-title {
        color: #00969f;
        text-align: center;
        border-bottom: 1px solid $menuBg;
      }

      .line-item-value {
        color: $activeCompanyMenuText;
        text-align: center;
        white-space: nowrap;
        padding: 5px 10px;
      }
    }
  }

  .table-cnt {
    position: relative;
    padding-top: 16px;
    min-height: 40px;
    // height: 300px;
    // padding: 16px;
  }
}
</style>
